<template>
    <basic-container>
        <el-steps :active="step-1"
                  finish-status="success"
                  simple
                  style="margin-bottom: 20px;">
<!--            <el-step title="设计表单"
                     icon="el-icon-edit"></el-step>-->
            <el-step title="设计流程"
                     icon="el-icon-upload">
                <template #title>
                    设计流程
                    <el-tooltip v-show="step == '1'"
                                content="全屏">
                        <i class="el-icon-full-screen"
                           @click="handleFullScreen"></i>
                    </el-tooltip>
                </template>
            </el-step>
            <el-step title="完成"
                     icon="el-icon-circle-check"></el-step>
        </el-steps>
<!--        v-show="step == 0"-->
        <div style="position:absolute;left:-999999px;">
            <avue-form ref="form1"
                       :option="step1.option"
                       v-model="step1.form">
                <!--<template #tip>
                  <el-link type="primary"
                           :underline="false"
                           @click="$router.push('/plugin/workflow/design/form')">没有想要的表单？点击去设计</el-link>
                </template>-->
                <template #form>
                    <avue-form style="margin-bottom: 66px;"
                               ref="form2"
                               v-model="step1.form"
                               :option="step1.option1"></avue-form>
                </template>
            </avue-form>
        </div>
        <div v-if="step == 1">
            <wf-design-v2 id="bpmn2"
                          ref="bpmn2"
                          style="height: calc(100vh - 290px); background: white;"
                          :options="step2.option">
                <user-select-self></user-select-self>
            </wf-design-v2>
        </div>
        <div v-if="step == 2">
            <wf-design-v2 ref="bpmn3"
                          style="height: calc(100vh - 290px)"
                          :options="step3.option"></wf-design-v2>
        </div>

        <div class="foot-item"
             :style="{width: isCollapse? 'calc(100% - 80px)': 'calc(100% - 260px)' }">
            <el-button type="primary"
                       size="medium"
                       v-if="step > 1"
                       @click="step--">上一步</el-button>
            <el-button type="success"
                       size="medium"
                       v-if="step < 2"
                       @click="handleNextStep">下一步</el-button>
            <el-button type="success"
                       size="medium"
                       v-if="step == 2"
                       @click="handleSave">保存</el-button>
        </div>
    </basic-container>
</template>

<script>
import { getDetail as getFormByKey } from '@/api/plugin/workflow/form'
import { submit, getDetail, submitFlowModel } from '@/api/plugin/workflow/model'
import { getList as buttonList } from '@/api/plugin/workflow/button'
import { userList } from '@/api/plugin/workflow/process'

import { fullscreenToggel } from "@/util/util";

import { mapGetters } from 'vuex'
import UserSelectSelf from "@/views/plugin/workflow/process/components/user-select";
import {validatenull} from "../../../../util/validate";
import {caseDefaultForm} from "@/views/plugin/workflow/mixins/case-default-form";

export default {
    name: 'design_form',
    computed: {
        ...mapGetters(['tag', 'isCollapse', 'language']),
    },
    props: {
        serviceItem: {},
        servTableType: null
    },
    components:{UserSelectSelf},
    watch: {
        /*'step1.option1': {
          handler(val) {
              if(!validatenull(val) && !validatenull(val.column)){
                  console.log(1);
                  this.initFirstStep();
              }
          }
        },*/
        'serviceItem.modelId': {
            handler(val) {
                const that = this;
                that.$set(that.step1.form, 'column', caseDefaultForm);
                that.process.formKey = "wf_ex_" + 'business';
                const { column } = that.step1.form
                that.$set(that.step2.option, 'exForm', {
                    exFormKey: 'business', column
                });
                if (!val || val == 0) {
                    return
                }
                getDetail(val).then(res => {
                    that.process = res.data.data
                    const { formKey, xml, exForm } = that.process
                    that.$set(that.step2.option, 'xml', xml)
                    that.$set(that.step2.option, 'process', that.process)
                    if (formKey.startsWith('wf_ex_')) { // 外置表单
                        const column = []
                        exForm.forEach(ex => {
                            column.push({
                                label: ex.name,
                                prop: ex.id,
                                readable: true,
                                writable: true
                            })
                        })
                        //that.$set(that.step1.form, 'column', column)
                        that.$set(that.step1.form, 'formType', 2)
                        that.$set(that.step1.form, 'exFormKey', formKey.substring(6))
                    } else {
                        that.$set(that.step1.form, 'formKey', formKey);
                    }
                })
            },
            immediate: true
        },
        language(val) {
            const option = {
                lang: val
            }
            if (this.$refs.bpmn2) {
                this.$refs.bpmn2.getData('xml', false, false).then(data => {
                    option.xml = data
                    this.$set(this.step2, 'option', {
                        ...this.step2.option,
                        ...option
                    })
                })
            } else this.$set(this.step2, 'option', {
                ...this.step2.option,
                ...option
            })
        }
    },
    data() {
        const _this = this
        return {
            step: 1,
            step1: {
                form: {},
                option: {
                    menuBtn: false,
                    group: [{
                        labelPosition: 'left',
                        label: '选择表单',
                        icon: 'el-icon-warning-outline',
                        arrow: false,
                        column: [{
                            label: '表单类型',
                            prop: 'formType',
                            type: 'radio',
                            dicData: [{
                                label: '内置表单',
                                value: 1
                            }, {
                                label: '外置表单',
                                value: 2
                            }],
                            span: 24,
                            value: 2,
                            event: {
                                change: (val) => {
                                    if (!val) return
                                    if (val == 1) {
                                        this.findObject(this.step1.option.group[0].column, 'exFormKey').display = false
                                        this.findObject(this.step1.option.group[1].column, 'column').display = false
                                        this.findObject(this.step1.option.group[0].column, 'formKey').display = true
                                        this.findObject(this.step1.option.group[0].column, 'tip').display = false
                                        this.findObject(this.step1.option.group[1].column, 'form').display = true
                                    } else {
                                        this.findObject(this.step1.option.group[0].column, 'exFormKey').display = true
                                        this.findObject(this.step1.option.group[1].column, 'column').display = true
                                        this.findObject(this.step1.option.group[0].column, 'formKey').display = false
                                        this.findObject(this.step1.option.group[0].column, 'tip').display = false
                                        this.findObject(this.step1.option.group[1].column, 'form').display = false
                                        this.step1.option.group[1].display = true
                                    }
                                }
                            },
                        }, {
                            label: '表单key',
                            prop: 'exFormKey',
                            display: false,
                            rules: [{ required: true, message: '请输入外置表单key' }],
                            value: "business",
                        }, {
                            label: '表单',
                            prop: 'formKey',
                            type: 'select',
                            dicUrl: '/api/blade-workflow/design/form/list?size=-1&status=1',
                            dicFormatter: (data) => {
                                return data.data.records
                            },
                            props: {
                                label: 'name',
                                value: 'key'
                            },
                            event: {
                                change: (val) => {
                                    this.step1.option1 = {}
                                    if (val) {
                                        getFormByKey({ key: val }).then(res => {
                                            _this.step1.option1 = { ...eval('(' + res.data.data.content + ')'), menuBtn: false, readonly: true, detail: true }
                                            _this.step1.option.group[1].display = true
                                            setTimeout(() => {
                                                _this.$refs.form2.clearValidate()
                                            })
                                        }).catch(() => {
                                            _this.step1.option.group[1].display = false
                                        })
                                    } else {
                                        _this.step1.option.group[1].display = false
                                    }
                                }
                            },
                            rules: [{ required: true, message: '请选择表单' }],
                            //value: "ywsp",
                            //disabled: true,
                        }, {
                            labelWidth: 0,
                            prop: 'tip',
                            formslot: true,
                            display: false,
                        }]
                    }, {
                        label: '表单预览',
                        icon: 'el-icon-view',
                        display: false,
                        arrow: false,
                        column: [{
                            prop: 'form',
                            labelWidth: 0,
                            span: 24,
                            formslot: true
                        }, {
                            prop: 'column',
                            labelWidth: '0',
                            tip: '可用于控制外置表单字段的显隐配置，如果希望自己控制请忽略此字段',
                            tipPlacement: 'top',
                            span: 24,
                            type: 'dynamic',
                            children: {
                                align: 'center',
                                column: [{
                                    label: '字段',
                                    prop: 'label',
                                    rules: [{ required: true, message: '请输入字段名' }]
                                }, {
                                    label: '属性',
                                    prop: 'prop',
                                    rules: [{ required: true, message: '请输入属性名' }]
                                }, {
                                    label: '默认可读',
                                    prop: 'readable',
                                    type: 'switch',
                                    disabled: true,
                                    value: true
                                }, {
                                    label: '默认可写',
                                    prop: 'writable',
                                    type: 'switch',
                                    disabled: true,
                                    value: true
                                }]
                            },
                            display: false
                        }]
                    }]
                },
                option1: {}
            },
            step2: {
                option: {
                    config: false,
                    mode: 'edit',
                    engine: 'flowable',
                    toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
                }
            },
            step3: {
                option: {
                    config: false,
                    mode: 'view',
                    simulation: true,
                    minimap: true,
                    engine: 'flowable'
                }
            },
            process: {},
            fullscreen: false
        }
    },
    mounted() {
        this.getButtonList()
        // this.getUserList()
        this.getUserListV2()
        //this.initFirstStep()
    },
    methods: {
        initFirstStep(){
            const that = this;
            this.$nextTick(() => {
                that.$refs.form1.validate((valid, done) => {
                    if (valid) {
                        const { formType, formKey, exFormKey, column } = that.step1.form
                        if (formType == 1) { // 内置表单
                            that.process.formKey = formKey
                            that.$set(that.step2.option, 'form', that.step1.option1)
                        } else { // 外置表单
                            that.process.formKey = "wf_ex_" + exFormKey
                            that.$set(that.step2.option, 'exForm', {
                                exFormKey, column
                            })
                        }
                        that.step++
                        done()
                    }
                })
            });
        },
        handleNextStep() {
            const that = this;
            switch (that.step) {
                case 0:
                    that.$refs.form1.validate((valid, done) => {
                        if (valid) {
                            const { formType, formKey, exFormKey, column } = that.step1.form
                            if (formType == 1) { // 内置表单
                                that.process.formKey = formKey
                                that.$set(this.step2.option, 'form', that.step1.option1)
                            } else { // 外置表单
                                that.process.formKey = "wf_ex_" + exFormKey
                                that.$set(this.step2.option, 'exForm', {
                                    exFormKey, column
                                })
                            }
                            that.step++
                            done()
                        }
                    })
                    break;
                case 1:
                    this.$refs.bpmn2.getData('xml').then(data => {
                        this.$set(this.step2.option, 'xml', data)
                        this.$set(this.step3.option, 'xml', data)
                        this.process.xml = data
                        this.step++
                    })
                    break;
            }
        },
        handleSave() {
            const { businessObject } = this.$refs.bpmn3.getElementRegistry().getAll()[0]
            const { id, name, documentation } = businessObject
            const description = (documentation && documentation.length > 0) ? documentation[0].text : null

            const params = {
                ...this.process,
                modelKey: id,
                name,
                description
            }
            console.log(params);
            if (this.process.id) {
                this.$confirm('是否将此模型保存为新版本？这意味着可以返回到以前的版本。', '提示', {
                    distinguishCancelAndClose: true,
                    confirmButtonText: '否',
                    cancelButtonText: '是',
                    type: 'warning'
                }).then(() => {
                    params.newVersion = false

                    submitFlowModel(params, this.serviceItem.itemId, this.servTableType).then(() => {
                        //this.$message.success("操作成功")
                        // this.$router.push("/plugin/workflow/design/model")
                        this.$emit('getSubmitArg','111')
                    })
                }).catch(action => {
                    if (action == 'cancel') {
                        params.newVersion = true

                        submitFlowModel(params, this.serviceItem.itemId, this.servTableType).then(() => {
                            //this.$message.success("操作成功")
                            // this.$router.push("/plugin/workflow/design/model")
                            this.$emit('getSubmitArg','111')
                        })
                    }
                })
            } else {
                submitFlowModel(params, this.serviceItem.itemId, this.servTableType).then(() => {
                    //this.$message.success("操作成功")
                    this.$store.commit('DEL_TAG', this.tag)
                    // this.$router.push("/plugin/workflow/design/model")
                    this.$emit('getSubmitArg','111')
                })
            }
        },
        getButtonList() {
            buttonList(1, 99, { status: 1 }).then(res => {
                const list = res.data.data.records.map(l => {
                    return {
                        label: l.name,
                        prop: l.key,
                        display: true
                    }
                })
                this.$set(this.step2.option, 'button', list)
            })
        },
        getUserList() {
            const userConfig = {
                leftColumns: [{
                    title: '姓名',
                    dataIndex: 'realName',
                    align: 'center'
                }, {
                    title: '部门',
                    dataIndex: 'deptName',
                    align: 'center'
                }, {
                    title: '职位',
                    dataIndex: 'postName',
                    align: 'center'
                }],
                rightColumns: [{
                    title: '姓名',
                    dataIndex: 'realName',
                    align: 'center'
                },],
                filterKey: 'realName',
            }
            userList(1, 99, {}).then(res => {
                userConfig.data = res.data.data.records.map(r => {
                    return {
                        key: r.id,
                        realName: r.realName,
                        deptName: r.deptName
                    }
                })
                this.$set(this.step2.option, 'user', userConfig)
            })
        },
        getUserListV2() {
            this.$set(this.step2.option, 'user', {
                version: 'v2',
                userUrl: '/api/blade-user/search/user',
                roleUrl: '/api/blade-system/search/role',
                deptUrl: '/api/blade-system/search/dept',
                postUrl: '/api/blade-system/search/post',
                customUrl: '/api/blade-workflow/design/condition/list'
            })
        },
        handleFullScreen() {
            fullscreenToggel()
            this.$store.commit('SET_COLLAPSE')
        },
    }
}
</script>

<style scoped lang="scss">
.foot-item {
    position: fixed;
    bottom: 0;
    margin-left: -20px;
    // right: 0;
    z-index: 101;
    height: 66px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
